<template>
	<view>
		<view class="title">账户安全</view>
		<view class="account-item">
			<view class="account-item-left">
				<text>用户名：</text>
				<view>{{nicheng ? nicheng :''}}</view>
			</view>
			<view class="account-item-right" @click="confirmDialog(0)">修改</view>
		</view>
		<view class="account-item">
			<view class="account-item-left">
				<text>登录密码：</text>
				<view class="pwd">{{isPwdBind > 0 ? '已设置':'未设置'}}</view>
			</view>
			<navigator hover-class="false" class="account-item-right" url="/pages/mine/changePwd">设置</navigator>
		</view>
		<view class="account-item">
			<view class="account-item-left">
				<text>验证邮箱：</text>
				<view :class="{'wait':email && isEmailBind == 0,'state1':!email}">{{email ? email :'未设置'}}</view>
			</view>
			<view class="account-item-right" @click="setEmail">
				<view class="state1" v-if="email">{{isEmailBind > 0 ? '通过验证':'未验证'}}</view>
				<view>设置</view>
			</view>
		</view>
		<view class="account-item">
			<view class="account-item-left">
				<text>验证手机：</text>
				<view :class="{'state1':isPhoneBind == 0}">{{isPhoneBind > 0 ? phone :'未设置'}}</view>
			</view>
			<view class="account-item-right" @click="setPhone">设置</view>
		</view>
		<view class="tip"><text>账户关联：</text>关联第三方帐号也可以登录智助教育APP</view>
		<view class="relation">
			<image src="../../../static/image/logo-small.png" mode="heightFix"></image>
			<i class="iconfont iconjiantou1"></i>
			<i class="iconfont iconweixin1"></i>
			<view :class="{'cancel':isRelation}" @click="gotoRelation">{{isRelation ? '取消关联':'即刻关联'}}</view>
		</view>

		<uni-popup ref="dialogInput" type="dialog">
			<uni-popup-dialog mode="input" :title="popupTitle" :value="popupValue" :placeholder="popupPlaceholder" @confirm="dialogInputConfirm"
			 @close="dialogInputClose" :inputType="popupOtherType"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	export default {
		components: {
			uniPopupDialog
		},
		data() {
			return {
				nicheng: uni.getStorageSync('userInfo').nicheng, //用户名
				isPwdBind: uni.getStorageSync('userInfo').is_set_pas, //是否设置密码
				isEmailBind: uni.getStorageSync('userInfo').is_set_email, //是否绑定邮箱
				email: uni.getStorageSync('userInfo').email, //绑定邮箱
				isPhoneBind: uni.getStorageSync('userInfo').is_set_phone, //是否绑定手机
				phone: uni.getStorageSync('userInfo').phone, //绑定手机号
				popupType: 0, //0修改用户名 1设置邮箱 2||4密码验证
				popupTitle: '', //弹出层标题
				popupValue: '', //弹出层默认值
				popupPlaceholder: '', //弹出层默认显示
				popupOtherType: 0, //弹出层文本框类型
				isRelation: false, //是否关联第三方
			}
		},
		methods: {
			// 打开弹出层
			confirmDialog(index) {
				this.$refs.dialogInput.open();
				this.popupType = index;
				this.popupOtherType = 0;
				if (index == 0) { //修改用户名
					this.popupTitle = '修改用户名';
					this.popupValue = this.nicheng;
					this.popupPlaceholder = '请输入';
				} else if (index == 1) { //设置邮箱
					this.popupOtherType = 1;
					this.popupTitle = '设置邮箱';
					this.popupValue = this.email;
					this.popupPlaceholder = '请输入邮箱地址';
				} else if (index == 2 || index == 4) { //密码验证
					this.popupTitle = '密码验证';
					this.popupPlaceholder = '请输入登录密码验证身份';
					if (index == 4) {
						this.popupPlaceholder = '请输入登录密码，验证身份后取消关联';
					}
				}
			},
			// 修改个人信息
			updateUserInfo(data, type) {
				this.$zapi.apiPost('user/currency.basic/UpdateBasic', data).then(res => {
					this.showDialog(res.data.msg);
					if (res.data.code == 200) {
						this.$emit('changeInfo');
						this.GetUserInfo();
					}
				})
			},
			// 获取个人信息替换缓存内容
			GetUserInfo() {
				this.$zapi.apiPost('user/currency.basic/GetUserInfo').then(res => {
					uni.setStorageSync('userInfo', res.data.data);
					this.nicheng = uni.getStorageSync('userInfo').nicheng; //用户名
					this.isPwdBind = uni.getStorageSync('userInfo').is_set_pas; //是否设置密码
					this.isPhoneBind = uni.getStorageSync('userInfo').is_set_phone; //是否绑定手机
					this.phone = uni.getStorageSync('userInfo').phone; //绑定手机号
					this.isEmailBind = uni.getStorageSync('userInfo').is_set_email; //是否绑定邮箱
					this.email = uni.getStorageSync('userInfo').email; //绑定邮箱
				})
			},
			// 弹出层确定点击事件
			dialogInputConfirm(done, val) {
				if (this.popupType == 0) { //修改用户名
					this.updateUserInfo({
						nicheng: val
					});
				} else if (this.popupType == 1) { //设置邮箱
					this.updateUserInfo({
						email: val
					});
				} else if (this.popupType == 4) { //取消关联第三方
					this.isRelation = false;
				}
				setTimeout(() => {
					done()
				}, 500)
			},
			// 弹出层取消点击事件
			dialogInputClose() {
				this.popupTitle = ''; //弹出层标题
				this.popupValue = ''; //弹出层默认值
				this.popupPlaceholder = ''; //弹出层默认显示
				this.popupOtherType = 0;
			},
			// 邮箱操作
			setEmail() {
				var _this = this;
				if (this.email) {
					var itemList = ['验证', '修改'];
					if (this.isEmailBind > 0) {
						itemList = ['解绑', '修改'];
					}
					uni.showActionSheet({
						itemList: itemList,
						itemColor: '#333333',
						success: res => {
							if (res.tapIndex == 1) {
								_this.confirmDialog(1);
							} else {
								if (this.isEmailBind > 0) {
									_this.unBind();
								} else {
									_this.sendVerify();
								}
							}
						}
					})
				} else {
					_this.confirmDialog(1);
				}
			},
			// 发送验证邮件
			sendVerify() {
				this.$zapi.apiPost('user/currency.basic/sendEmail', {
					email: this.email
				}).then(res => {
					this.showDialog(res.data.msg);
					if (res.data.code == 200) {
						this.GetUserInfo();
					}
				})
			},
			// 解除邮箱绑定
			unBind() {
				var _this = this;
				uni.showModal({
					content: '您确定要解除邮箱绑定?',
					confirmColor: '#FF9900',
					success: function(res) {
						if (res.confirm) {
							_this.$zapi.apiPost('user/currency.basic/UnBindEmail').then(res => {
								_this.showDialog(res.data.msg);
								if (res.data.code == 200) {
									_this.GetUserInfo();
								}
							})
						}
					}
				})
			},
			// 验证手机操作
			setPhone() {
				var _this = this;
				var state = '?type=set'
				if (this.phone) {
					uni.showActionSheet({
						itemList: ['解绑', '修改'],
						itemColor: '#333333',
						success: res => {
							if (res.tapIndex == 1) {
								state = '?type=update'
							} else {
								state = '?type=unBind'
							}
							uni.navigateTo({
								url: '/pages/personInfo/phoneHandle' + state
							})
						}
					})
				} else {
					uni.navigateTo({
						url: '/pages/personInfo/phoneHandle' + state
					})
				}
			},
			// 第三方关联
			gotoRelation() {
				if (this.isRelation) {
					this.confirmDialog(4);
				} else {
					uni.navigateTo({
						url: '/pages/personInfo/WeChat'
					})
				}
			},
			// 提示框
			showDialog(msg, icon) {
				var newIncon = 'none';
				if (icon) {
					newIncon = icon;
				}
				uni.showToast({
					title: msg,
					icon: newIncon
				})
			}
		}
	}
</script>

<style lang="scss">
	.title {
		color: #333333;
		font-size: 32upx;
		font-weight: 500;
		margin-bottom: 30upx;

		i {
			color: #FF9900;
			float: right;
			font-weight: bold;
		}
	}

	.account-item {
		min-height: 90upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2upx solid #DCDFE6;

		.account-item-left {
			width: 72%;
			color: #333333;
			display: flex;
			align-items: center;
			white-space: nowrap;

			view {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.wait {
				color: #F56C6C;
			}
		}

		.account-item-right {
			width: 28%;
			color: #FF9900;
			font-size: 26upx;
			display: flex;
			justify-content: flex-end;
			white-space: nowrap;

			view:nth-child(2) {
				margin-left: 10%;
			}
		}
	}

	.state1 {
		color: #C0C4CC;
	}

	.state2 {
		color: #333333;
	}

	.tip {
		color: #C0C4CC;
		padding: 30upx 0;
		display: flex;

		text {
			color: #333333;
			white-space: nowrap;
		}
	}

	.relation {
		height: 200upx;
		margin: 0 16upx;
		width: calc(100% - 32upx);
		background-color: #FAFAFA;
		border-radius: 8upx;
		display: flex;
		align-items: center;

		image {
			height: 80upx !important;
			margin-left: 48upx;
		}

		.iconjiantou1 {
			color: #C0C4CC;
			font-size: 60upx;
			margin: 0 50upx;
		}

		.iconweixin1 {
			color: #50B674;
			font-size: 80upx;
		}

		view {
			color: #FF9900;
			font-weight: 500;
			margin-left: 32upx;
		}

		.cancel {
			color: #C0C4CC;
		}
	}
</style>
